<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>榜单</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/head.css">
    <link rel="stylesheet" href="css/list.css">
</head>

<body>
    <!-- 头部 -->
    <header>
        <!-- 包裹起来定大小居中 -->
        <div>
            <!-- 猫眼电影图标+地点下拉列表 -->
            <div class="cat">
                <a href="">
                    <img src="img/maoyan_logo.png" alt="">
                    <h1>猫眼电影</h1>
                </a>
                <ul>
                    <li>
                        <a href="">成都
                            <span>▼</span>
                        </a>
                        <div class="white">
                        </div>
                        <div class="city">
                            <div class="position-city">
                                <span>定位城市 ：
                                    <a href="">成都</a>
                                </span>
                            </div>
                            <div class="town">
                                <span>A</span>
                                <span>B</span>
                                <span>C</span>
                                <span>D</span>
                                <span>E</span>
                                <span>F</span>
                                <span>G</span>
                                <span>H</span>
                                <span>I</span>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
            <!-- 导航栏 -->
            <nav>
                <a href="./index.html">首页</a>
                <a href="./movie.html">电影</a>
                <a href="./cinema.html">影院</a>
                <a href="./list.html">榜单</a>
                <a href="./register.html">注册</a>
                <a href="./personal.html">个人中心</a>
                <a href="./seat.html">选座</a>
                <!-- <a href="">热点</a> -->
            </nav>

            <!-- APP下载 搜索框 用户头像 -->
            <div class="head-left">
                <!-- APP下载 -->
                <div class="app">
                    <a href="">
                        <img src="img/app_logo.png" alt="">
                        <p>APP下载</p>
                        <span>▼</span>
                    </a>
                    <div>
                    </div>
                </div>
                <!-- 搜索 -->
                <div class="search">
                    <input type="text" placeholder="找影视剧">
                    <input type="submit" value="">
                </div>
                <!-- 用户头像 -->
                <div class="user">
                    <a href="">
                        <img src="img/user_logo.png" alt="">
                        <span>▼</span>
                    </a>
                    <div>
                        <a href="">登陆</a>
                    </div>
                </div>
            </div>
        </div>
    </header>
    <!-- 占位 -->
    <div class="seat"></div>
    <!-- 顶部导航栏 -->
    <section class="listTop">
        <div>
            <a href="">热映口碑榜
                <div></div>
            </a>
            <a href="">最受期待榜
                <div></div>
            </a>
            <a href="">国内票房榜
                <div></div>
            </a>
            <a href="">北美票房榜
                <div></div>
            </a>
            <a href="">TOP100榜
                <div></div>
            </a>
        </div>
    </section>
    <!-- 榜单内容 -->
    <section class="list-movies">
        <div class="list-top-title">
            <small>
                2021-01-21
                <p>已更新</p>
            </small>
            <small>榜单规则︰将昨日国内热映的影片，按照评分从高到低排列取前10名，每天上午10点更新。相关数据来源于“猫眼专业服”及“猫眼电影库”。</small>
        </div>
        <div class="list-content">
            <div class="list-first first">
                <img src="img/list-logo.png" alt="">
            </div>
            <div class="movie-contant">
                <a href="">
                    <img src="img/xiaohonghua.jpg" alt="">
                </a>
                <div>
                    <div>
                        <a href="">湄公河行动</a>
                        <p>主演:张涵予,彭于晏,冯文娟</p>
                        <span>上映时间:2016-09-30</span>
                    </div>
                    <i>9.3</i>
                </div>
            </div>
        </div>
        <div class="list-content">
            <div class="list-first second">
                <i>2</i>
            </div>
            <div class="movie-contant">
                <a href="">
                    <img src="img/xiaohonghua.jpg" alt="">
                </a>
                <div>
                    <div>
                        <a href="">湄公河行动</a>
                        <p>主演:张涵予,彭于晏,冯文娟</p>
                        <span>上映时间:2016-09-30</span>
                    </div>
                    <i>9.3</i>
                </div>
            </div>
        </div>
        <div class="list-content">
            <div class="list-first second">
                <i>3</i>
            </div>
            <div class="movie-contant">
                <a href="">
                    <img src="img/xiaohonghua.jpg" alt="">
                </a>
                <div>
                    <div>
                        <a href="">湄公河行动</a>
                        <p>主演:张涵予,彭于晏,冯文娟</p>
                        <span>上映时间:2016-09-30</span>
                    </div>
                    <i>9.3</i>
                </div>
            </div>
        </div>
        <div class="list-content">
            <div class="list-first">
                <i>4</i>
            </div>
            <div class="movie-contant">
                <a href="">
                    <img src="img/xiaohonghua.jpg" alt="">
                </a>
                <div>
                    <div>
                        <a href="">湄公河行动</a>
                        <p>主演:张涵予,彭于晏,冯文娟</p>
                        <span>上映时间:2016-09-30</span>
                    </div>
                    <i>9.3</i>
                </div>
            </div>
        </div>
        <div class="list-content">
            <div class="list-first">
                <i>5</i>
            </div>
            <div class="movie-contant">
                <a href="">
                    <img src="img/xiaohonghua.jpg" alt="">
                </a>
                <div>
                    <div>
                        <a href="">湄公河行动</a>
                        <p>主演:张涵予,彭于晏,冯文娟</p>
                        <span>上映时间:2016-09-30</span>
                    </div>
                    <i>9.3</i>
                </div>
            </div>
        </div>
        <div class="list-content">
            <div class="list-first">
                <i>6</i>
            </div>
            <div class="movie-contant">
                <a href="">
                    <img src="img/xiaohonghua.jpg" alt="">
                </a>
                <div>
                    <div>
                        <a href="">湄公河行动</a>
                        <p>主演:张涵予,彭于晏,冯文娟</p>
                        <span>上映时间:2016-09-30</span>
                    </div>
                    <i>9.3</i>
                </div>
            </div>
        </div>
        <div class="list-content">
            <div class="list-first">
                <i>7</i>
            </div>
            <div class="movie-contant">
                <a href="">
                    <img src="img/xiaohonghua.jpg" alt="">
                </a>
                <div>
                    <div>
                        <a href="">湄公河行动</a>
                        <p>主演:张涵予,彭于晏,冯文娟</p>
                        <span>上映时间:2016-09-30</span>
                    </div>
                    <i>9.3</i>
                </div>
            </div>
        </div>
        <div class="list-content">
            <div class="list-first">
                <i>8</i>
            </div>
            <div class="movie-contant">
                <a href="">
                    <img src="img/xiaohonghua.jpg" alt="">
                </a>
                <div>
                    <div>
                        <a href="">湄公河行动</a>
                        <p>主演:张涵予,彭于晏,冯文娟</p>
                        <span>上映时间:2016-09-30</span>
                    </div>
                    <i>9.3</i>
                </div>
            </div>
        </div>
        <div class="list-content">
            <div class="list-first">
                <i>9</i>
            </div>
            <div class="movie-contant">
                <a href="">
                    <img src="img/xiaohonghua.jpg" alt="">
                </a>
                <div>
                    <div>
                        <a href="">湄公河行动</a>
                        <p>主演:张涵予,彭于晏,冯文娟</p>
                        <span>上映时间:2016-09-30</span>
                    </div>
                    <i>9.3</i>
                </div>
            </div>
        </div>
        <div class="list-content">
            <div class="list-first">
                <i>10</i>
            </div>
            <div class="movie-contant">
                <a href="">
                    <img src="img/xiaohonghua.jpg" alt="">
                </a>
                <div>
                    <div>
                        <a href="">湄公河行动</a>
                        <p>主演:张涵予,彭于晏,冯文娟</p>
                        <span>上映时间:2016-09-30</span>
                    </div>
                    <i>9.3</i>
                </div>
            </div>
        </div>
    </section>
    <!-- 脚 -->
    <footer>
        <div>
            <p>◎2016猫眼电影 maoyan.com京ICP证160733号京ICP备16022489号-1京公网安备11010502030881号网络文化经营许可证电子公告服务规则</p>
            <p>北京猫眼文化传媒有限公司</p>
        </div>
    </footer>
</body>

</html>